<template>
  <div class="tw-liblonglistdiv" :class="{[`x${_uid}`]:true}">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      class="tw-longlistdiv-list" :class="{xcolumn: isColumn, xwrap: resultColumns > 0, [`x${_uid}`]:true}"
      v-model="loading"
      :finished="finished"
      finished-text=""
      @load="onLoad"
    >
    <slot></slot>
    </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'
import border from '../tw-lib-base/border/mixins'
import padding from '../tw-lib-base/padding/mixins'

export default {
  name: 'long-list-div',

  mixins: [style, border, padding],

  props,

  data () {
    return {
      loading: false,
      finished: false,
      refreshing: false,
      pageNum: 0, // 实际接口返回页码
      pageNo: 1 // 触发接口次数计算页码
    }
  },

  computed: {
    style () {
      return Object.assign({
        bgcolor: this.bgcolor
      }, this.paddingStyle, this.borderStyle)
    }
  },

  methods: {
    onLoad () {
      if (this.useCustFn && typeof this.custLoadFn === 'function') {
        this.custLoadFn(this)
      } else {
        setTimeout(() => {
          if (this.refreshing) {
            this.pageNum = 1
            // this.pageNo = 1
            this.$emit('input', this.pageNum)
            this.$emit('change', this.pageNum)
            this.refreshing = false
            this.loading = false;
          } else {
            this.loading = false;
            if (this.data && parseInt(this.data.length) === parseInt(this.pageSize)) { // 两者相等，表示数据同步准确
              // console.log('触发页码', this.pageNo)
              this.$emit('input', this.pageNum)
              this.$emit('change', this.pageNum)
            } else {
              this.finished = true
            }
          }
        }, 300);
      }
    },
    onRefresh () {
      if (this.useCustFn && typeof this.custRefreashFn === 'function') {
        this.custRefreashFn(this)
      } else {
        // 清空列表数据
        this.finished = false

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true
        this.onLoad()
      }
    },

    setStyle () {
      let style = `
        ::root.tw-liblonglistdiv {
          padding: ${this.paddingTop} ${this.paddingRight} ${this.paddingBottom} ${this.paddingLeft};
          background-color: ${this.bgcolor};
        }
      `

      if (this.hasBorder) {
        const border = `${this.borderSize} ${this.borderType} ${this.borderColor}`

        if (this.borderPosition.includes(0)) {
          style += `
            ::root.tw-liblonglistdiv {
              border-top: ${border};
            }
          `
        }

        if (this.borderPosition.includes(1)) {
          style += `
            ::root.tw-liblonglistdiv {
              border-bottom: ${border};
            }
          `
        }

        if (this.borderPosition.includes(2)) {
          style += `
            ::root.tw-liblonglistdiv {
                border-left: ${border};
              }
            `
        }

        if (this.borderPosition.includes(3)) {
          style += `
            ::root.tw-liblonglistdiv {
              border-right: ${border};
            }
          `
        }

        style += `
          ::root.tw-liblonglistdiv {
            border-radius: ${this.borderRadius};
          }
        `
      }

      this.addStyle(style)
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
